/*
 * @Descripttion : FOXCMS是一款高效的PHP多端跨平台内容管理系统
 * @Author       : FoxCMS Team
 * @Date         : 2022-12-21 22:53:18
 * @version      : V1.08
 * @copyright    : ©2021-现在 贵州黔狐科技股份有限公司 版权所有
 * @LastEditTime : 2024-08-07 09:17:46
 */

import { _typeOf } from './common/utils';
import { observer } from './common/observer';
import { dialog } from './dialog';

function Iconsel() {
    // class 类
    this.CONTAINER = '.foxui-iconsel';
    this.HANDLE = '.foxui-iconsel-handle';
    this.ICON = '.foxui-iconsel-dialog .icon-item';
    this.CLOSE = '.foxui-iconsel-dialog .foxui-dialog__header-close .foxui-icon-guanbi-o';
    this.GROUP = '.foxui-iconsel-dialog .group-item';
    this.ICONLIST = '.foxui-iconsel-dialog .icons-content .foxui-row';
    this.TARGETICONCONTAINER = '.foxui-iconsel-show';
    this.TARGETICON = '.foxui-iconsel-show i, .foxui-iconsel-show .img-icon';
    this.TARGETDELETE = '.foxui-iconsel-handle .delete';
    // dialog 组件配置
    this.target = ''; // 触发目标DOM节点(用于返回时作判断)
    this.width = '1000px';
    this.marginTop = '10vh';
    // 数据
    this.title =
        '<span>图标选择器</span><span style="font-size: 14px; margin-left: 20px; color: #909090;">提示：为保证页面样式统一性，尽量选择同一套图标</span>';
    this.className = 'foxui-iconsel-dialog';
    this.fontClass = '';
    this.dataList = [
        {
            groupName: 'FOXUI 成套图标集',
            iconList: [
                { name: '网络', icon: 'foxui-icon-wangluo-o' },
                { name: '网络', icon: 'foxui-icon-wangluo-f' },
                { name: '付款', icon: 'foxui-icon-fukuan-o' },
                { name: '付款', icon: 'foxui-icon-fukuan-f' },
                { name: '照片', icon: 'foxui-icon-zhaopian-o' },
                { name: '照片', icon: 'foxui-icon-zhaopian-f' },
                { name: '皮肤', icon: 'foxui-icon-pifu-o' },
                { name: '皮肤', icon: 'foxui-icon-pifu-f' },
                { name: '尊贵', icon: 'foxui-icon-zungui-o' },
                { name: '尊贵', icon: 'foxui-icon-zungui-f' },
                { name: '时间', icon: 'foxui-icon-shijian-o' },
                { name: '时间', icon: 'foxui-icon-shijian-f' },
                { name: '我的', icon: 'foxui-icon-wode-o' },
                { name: '我的', icon: 'foxui-icon-wode-f' },
                { name: '单选', icon: 'foxui-icon-danxuan-o' },
                { name: '单选', icon: 'foxui-icon-danxuan-f' },
                { name: '收藏', icon: 'foxui-icon-shoucang-o' },
                { name: '收藏', icon: 'foxui-icon-shoucang-f' },
                { name: '关机', icon: 'foxui-icon-guanji-o' },
                { name: '关机', icon: 'foxui-icon-guanji-f' },
                { name: '待发货', icon: 'foxui-icon-daifahuo-o' },
                { name: '待发货', icon: 'foxui-icon-daifahuo-f' },
                { name: '证件', icon: 'foxui-icon-zhengjian-o' },
                { name: '证件', icon: 'foxui-icon-zhengjian-f' },
                { name: '安全', icon: 'foxui-icon-anquan-o' },
                { name: '安全', icon: 'foxui-icon-anquan-f' },
                { name: '收货', icon: 'foxui-icon-shouhuo-o' },
                { name: '收货', icon: 'foxui-icon-shouhuo-f' },
                { name: '购物', icon: 'foxui-icon-gouwu-o' },
                { name: '购物', icon: 'foxui-icon-gouwu-f' },
                { name: '系统', icon: 'foxui-icon-xitong-o' },
                { name: '系统', icon: 'foxui-icon-xitong-f' },
                { name: '更新', icon: 'foxui-icon-gengxin-o' },
                { name: '更新', icon: 'foxui-icon-gengxin-f' },
                { name: '得分', icon: 'foxui-icon-defen-o' },
                { name: '得分', icon: 'foxui-icon-defen-f' },
                { name: '新闻', icon: 'foxui-icon-xinwen-o' },
                { name: '新闻', icon: 'foxui-icon-xinwen-f' },
                { name: '密钥', icon: 'foxui-icon-miyue-o' },
                { name: '密钥', icon: 'foxui-icon-miyue-f' },
                { name: '作者', icon: 'foxui-icon-zuozhe-o' },
                { name: '作者', icon: 'foxui-icon-zuozhe-f' },
                { name: '更多', icon: 'foxui-icon-gengduo-o' },
                { name: '更多', icon: 'foxui-icon-gengduo-f' },
                { name: '等级', icon: 'foxui-icon-dengji-o' },
                { name: '等级', icon: 'foxui-icon-dengji-f' },
                { name: '审核', icon: 'foxui-icon-shenhe-o' },
                { name: '审核', icon: 'foxui-icon-shenhe-f' },
                { name: '奖章', icon: 'foxui-icon-jiangzhang-o' },
                { name: '奖章', icon: 'foxui-icon-jiangzhang-f' },
                { name: '播放', icon: 'foxui-icon-bofang-o' },
                { name: '播放', icon: 'foxui-icon-bofang-f' },
                { name: '钻石', icon: 'foxui-icon-zuanshi-o' },
                { name: '钻石', icon: 'foxui-icon-zuanshi-f' },
                { name: '团队', icon: 'foxui-icon-tuandui-o' },
                { name: '团队', icon: 'foxui-icon-tuandui-f' },
                { name: '阅读', icon: 'foxui-icon-yuedu-o' },
                { name: '阅读', icon: 'foxui-icon-yuedu-f' },
                { name: '滑动', icon: 'foxui-icon-huadong-o' },
                { name: '滑动', icon: 'foxui-icon-huadong-f' },
                { name: '沟通', icon: 'foxui-icon-goutong-o' },
                { name: '沟通', icon: 'foxui-icon-goutong-f' },
                { name: 'QQ', icon: 'foxui-icon-QQ-o' },
                { name: 'QQ', icon: 'foxui-icon-QQ-f' },
                { name: '问题', icon: 'foxui-icon-wenti-o' },
                { name: '问题', icon: 'foxui-icon-wenti-f' },
                { name: '备案', icon: 'foxui-icon-beian-o' },
                { name: '备案', icon: 'foxui-icon-beian-f' },
                { name: '微信', icon: 'foxui-icon-weixin-o' },
                { name: '微信', icon: 'foxui-icon-weixin-f' },
                { name: '首页', icon: 'foxui-icon-shouye-o' },
                { name: '首页', icon: 'foxui-icon-shouye-f' },
                { name: '坐标', icon: 'foxui-icon-zuobiao-o' },
                { name: '坐标', icon: 'foxui-icon-zuobiao-f' },
                { name: '错误', icon: 'foxui-icon-cuowu-o' },
                { name: '错误', icon: 'foxui-icon-cuowu-f' },
                { name: '政策', icon: 'foxui-icon-zhengce-o' },
                { name: '政策', icon: 'foxui-icon-zhengce-f' },
                { name: '编辑', icon: 'foxui-icon-bianji-o' },
                { name: '编辑', icon: 'foxui-icon-bianji-f' },
                { name: '用户', icon: 'foxui-icon-yonghu-o' },
                { name: '用户', icon: 'foxui-icon-yonghu-f' },
                { name: '正确', icon: 'foxui-icon-zhengque-o' },
                { name: '正确', icon: 'foxui-icon-zhengque-f' },
                { name: '会员', icon: 'foxui-icon-huiyuan-o' },
                { name: '会员', icon: 'foxui-icon-huiyuan-f' },
                { name: '显示', icon: 'foxui-icon-xianshi-o' },
                { name: '显示', icon: 'foxui-icon-xianshi-f' },
                { name: '分类', icon: 'foxui-icon-fenlei-o' },
                { name: '分类', icon: 'foxui-icon-fenlei-f' },
                { name: '删除', icon: 'foxui-icon-shanchu-o' },
                { name: '删除', icon: 'foxui-icon-shanchu-f' },
                { name: '信息', icon: 'foxui-icon-xinxi-o' },
                { name: '信息', icon: 'foxui-icon-xinxi-f' },
                { name: '授权', icon: 'foxui-icon-shouquan-o' },
                { name: '授权', icon: 'foxui-icon-shouquan-f' },
                { name: '消息', icon: 'foxui-icon-xiaoxi-o' },
                { name: '消息', icon: 'foxui-icon-xiaoxi-f' },
                { name: '订单', icon: 'foxui-icon-dingdan-o' },
                { name: '订单', icon: 'foxui-icon-dingdan-f' },
                { name: '禁用', icon: 'foxui-icon-jinyong-o' },
                { name: '禁用', icon: 'foxui-icon-jinyong-f' },
                { name: '老师', icon: 'foxui-icon-laoshi-o' },
                { name: '老师', icon: 'foxui-icon-laoshi-f' },
                { name: '留言', icon: 'foxui-icon-liuyan-o' },
                { name: '留言', icon: 'foxui-icon-liuyan-f' },
                { name: '分组', icon: 'foxui-icon-fenzu-o' },
                { name: '分组', icon: 'foxui-icon-fenzu-f' },
                { name: '金额', icon: 'foxui-icon-jine-o' },
                { name: '金额', icon: 'foxui-icon-jine-f' },
                { name: '通讯', icon: 'foxui-icon-tongxun-o' },
                { name: '通讯', icon: 'foxui-icon-tongxun-f' },
                { name: '领导', icon: 'foxui-icon-lingdao-o' },
                { name: '领导', icon: 'foxui-icon-lingdao-f' },
                { name: '人员', icon: 'foxui-icon-renyuan-o' },
                { name: '人员', icon: 'foxui-icon-renyuan-f' },
                { name: '商标', icon: 'foxui-icon-shangbiao-o' },
                { name: '商标', icon: 'foxui-icon-shangbiao-f' },
                { name: '来电', icon: 'foxui-icon-laidian-o' },
                { name: '来电', icon: 'foxui-icon-laidian-f' },
                { name: '电话', icon: 'foxui-icon-dianhua-o' },
                { name: '电话', icon: 'foxui-icon-dianhua-f' },
                { name: '加锁', icon: 'foxui-icon-jiasuo-o' },
                { name: '加锁', icon: 'foxui-icon-jiasuo-f' },
                { name: '搜索', icon: 'foxui-icon-sousuo-o' },
                { name: '搜索', icon: 'foxui-icon-sousuo-f' },
                { name: '退出', icon: 'foxui-icon-tuichu-o' },
                { name: '退出', icon: 'foxui-icon-tuichu-f' },
                { name: '日历', icon: 'foxui-icon-rili-o' },
                { name: '日历', icon: 'foxui-icon-rili-f' },
                { name: '日期', icon: 'foxui-icon-riqi-o' },
                { name: '日期', icon: 'foxui-icon-riqi-f' },
                { name: '文章', icon: 'foxui-icon-wenzhang-o' },
                { name: '文章', icon: 'foxui-icon-wenzhang-f' },
                { name: '提示', icon: 'foxui-icon-tishi-o' },
                { name: '提示', icon: 'foxui-icon-tishi-f' },
                { name: '版本', icon: 'foxui-icon-banben-o' },
                { name: '版本', icon: 'foxui-icon-banben-f' },
                { name: '开始', icon: 'foxui-icon-kaishi-o' },
                { name: '开始', icon: 'foxui-icon-kaishi-f' },
                { name: '下拉', icon: 'foxui-icon-xiala-o' },
                { name: '下拉', icon: 'foxui-icon-xiala-f' },
                { name: '工作', icon: 'foxui-icon-gongzuo-o' },
                { name: '工作', icon: 'foxui-icon-gongzuo-f' },
                { name: '复选', icon: 'foxui-icon-fuxuan-o' },
                { name: '复选', icon: 'foxui-icon-fuxuan-f' },
                { name: '全选', icon: 'foxui-icon-quanxuan-o' },
                { name: '全选', icon: 'foxui-icon-quanxuan-f' },
                { name: '管理', icon: 'foxui-icon-guanli-o' },
                { name: '管理', icon: 'foxui-icon-guanli-f' },
                { name: '图片', icon: 'foxui-icon-tupian-o' },
                { name: '图片', icon: 'foxui-icon-tupian-f' },
                { name: '层级', icon: 'foxui-icon-cengji-o' },
                { name: '层级', icon: 'foxui-icon-cengji-f' },
                { name: '应用', icon: 'foxui-icon-yingyong-o' },
                { name: '应用', icon: 'foxui-icon-yingyong-f' },
                { name: '合作', icon: 'foxui-icon-hezuo-o' },
                { name: '合作', icon: 'foxui-icon-hezuo-f' },
                { name: '钻级', icon: 'foxui-icon-zuanji-o' },
                { name: '钻级', icon: 'foxui-icon-zuanji-f' },
                { name: '微笑', icon: 'foxui-icon-weixiao-o' },
                { name: '微笑', icon: 'foxui-icon-weixiao-f' },
                { name: '贴士', icon: 'foxui-icon-tieshi-o' },
                { name: '贴士', icon: 'foxui-icon-tieshi-f' },
                { name: '全屏', icon: 'foxui-icon-quanping-o' },
                { name: '全屏', icon: 'foxui-icon-quanping-f' },
                { name: '皇冠', icon: 'foxui-icon-huangguan-o' },
                { name: '皇冠', icon: 'foxui-icon-huangguan-f' },
                { name: '设置', icon: 'foxui-icon-shezhi-o' },
                { name: '设置', icon: 'foxui-icon-shezhi-f' },
                { name: '书籍', icon: 'foxui-icon-shuji-o' },
                { name: '书籍', icon: 'foxui-icon-shuji-f' },
                { name: '发货', icon: 'foxui-icon-fahuo-o' },
                { name: '发货', icon: 'foxui-icon-fahuo-f' },
                { name: '阵列', icon: 'foxui-icon-zhenlie-o' },
                { name: '阵列', icon: 'foxui-icon-zhenlie-f' },
                { name: '统计', icon: 'foxui-icon-tongji-o' },
                { name: '统计', icon: 'foxui-icon-tongji-f' },
                { name: '广告', icon: 'foxui-icon-guanggao-o' },
                { name: '广告', icon: 'foxui-icon-guanggao-f' },
                { name: '访客', icon: 'foxui-icon-fangke-o' },
                { name: '访客', icon: 'foxui-icon-fangke-f' },
                { name: '友链', icon: 'foxui-icon-youlian-o' },
                { name: '友链', icon: 'foxui-icon-youlian-f' },
                { name: '正版', icon: 'foxui-icon-zhengban-o' },
                { name: '正版', icon: 'foxui-icon-zhengban-f' },
                { name: '同步', icon: 'foxui-icon-tongbu-o' },
                { name: '同步', icon: 'foxui-icon-tongbu-f' },
                { name: '看板', icon: 'foxui-icon-kanban-o' },
                { name: '看板', icon: 'foxui-icon-kanban-f' },
                { name: '内容', icon: 'foxui-icon-neirong-o' },
                { name: '内容', icon: 'foxui-icon-neirong-f' },
                { name: '表单', icon: 'foxui-icon-biaodan-o' },
                { name: '表单', icon: 'foxui-icon-biaodan-f' },
                { name: '抖音', icon: 'foxui-icon-douyin-o' },
                { name: '抖音', icon: 'foxui-icon-douyin-f' },
                { name: '推特', icon: 'foxui-icon-tuite-o' },
                { name: '推特', icon: 'foxui-icon-tuite-f' },
                { name: 'youtube', icon: 'foxui-icon-youtube-o' },
                { name: 'youtube', icon: 'foxui-icon-youtube-f' },
                { name: '地球', icon: 'foxui-icon-diqiu-o' },
                { name: '地球', icon: 'foxui-icon-diqiu-f' },
                { name: 'whatsapp', icon: 'foxui-icon-whatsapp-o' },
                { name: 'whatsapp', icon: 'foxui-icon-whatsapp-f' },
                { name: '银行卡', icon: 'foxui-icon-yinhangka-o' },
                { name: '银行卡', icon: 'foxui-icon-yinhangka-f' },
            ],
        },
        {
            groupName: 'FOXUI 线条图标集',
            iconList: [
                { name: '链接', icon: 'foxui-icon-lianjie-o' },
                { name: '裁判', icon: 'foxui-icon-caipan-o' },
                { name: '电脑', icon: 'foxui-icon-diannao-o' },
                { name: '打勾', icon: 'foxui-icon-dagou-o' },
                { name: '代码', icon: 'foxui-icon-daima-o' },
                { name: '关闭', icon: 'foxui-icon-guanbi-o' },
                { name: '加号', icon: 'foxui-icon-jiahao-o' },
                { name: 'SSL证', icon: 'foxui-icon-SSLzheng-o' },
                { name: '菜单', icon: 'foxui-icon-caidan-o' },
                { name: '二维码', icon: 'foxui-icon-erweima-o' },
                { name: '更多', icon: 'foxui-icon-gengduo-o' },
                { name: '减号', icon: 'foxui-icon-jianhao-o' },
                { name: '列表', icon: 'foxui-icon-liebiao-o' },
                { name: '返回', icon: 'foxui-icon-fanhui-o' },
                { name: '加购', icon: 'foxui-icon-jiagou-o' },
                { name: '分享', icon: 'foxui-icon-fenxiang-o' },
                { name: '客服', icon: 'foxui-icon-kefu-o' },
                { name: '电脑版', icon: 'foxui-icon-diannaoban-o' },
                { name: '双向上', icon: 'foxui-icon-shuangxiangshang-o' },
                { name: '定位', icon: 'foxui-icon-dingwei-o' },
                { name: '可见', icon: 'foxui-icon-kejian-o' },
                { name: '双向左', icon: 'foxui-icon-shuangxiangzuo-o' },
                { name: '下展', icon: 'foxui-icon-xiazhan-o' },
                { name: '下载', icon: 'foxui-icon-xiazai-o' },
                { name: '头条', icon: 'foxui-icon-toutiao-o' },
                { name: '向上', icon: 'foxui-icon-xiangshang-o' },
                { name: '加载', icon: 'foxui-icon-jiazai-o' },
                { name: '段落', icon: 'foxui-icon-duanla-o' },
                { name: '向下', icon: 'foxui-icon-xiangxia-o' },
                { name: '前往', icon: 'foxui-icon-qianwang-o' },
                { name: '双向下', icon: 'foxui-icon-shuangxiangxia-o' },
                { name: '配置', icon: 'foxui-icon-peizhi-o' },
                { name: '向左', icon: 'foxui-icon-xiangzuo-o' },
                { name: '上展', icon: 'foxui-icon-shangzhan-o' },
                { name: '上传', icon: 'foxui-icon-shangchuan-o' },
                { name: '向右', icon: 'foxui-icon-xiangyou-o' },
                { name: '手机', icon: 'foxui-icon-shouji-o' },
                { name: '双向右', icon: 'foxui-icon-shuangxiangyou-o' },
                { name: '隐藏', icon: 'foxui-icon-yincang-o' },
                { name: '运动', icon: 'foxui-icon-yundong-o' },
                { name: '最右', icon: 'foxui-icon-zuiyou-o' },
                { name: '最下', icon: 'foxui-icon-zuixia-o' },
                { name: '字体', icon: 'foxui-icon-ziti-o' },
                { name: '自适应', icon: 'foxui-icon-zishiying-o' },
                { name: '最左', icon: 'foxui-icon-zuizuo' },
                { name: '最上', icon: 'foxui-icon-zuishang-o' },
                { name: '置顶', icon: 'foxui-icon-zhiding-o' },
                { name: '手机版', icon: 'foxui-icon-shoujiban-o' },
                { name: '站点', icon: 'foxui-icon-zhandian-o' },
                { name: '软著', icon: 'foxui-icon-ruanzhu-o' },
                { name: '视图', icon: 'foxui-icon-shitu-o' },
                { name: '排序', icon: 'foxui-icon-paixu-o' },
            ],
        },
        {
            groupName: 'FOXUI 填充图标集',
            iconList: [
                { name: '工信', icon: 'foxui-icon-gongxin-f' },
                { name: '火炬', icon: 'foxui-icon-huoju-f' },
                { name: '淘宝', icon: 'foxui-icon-taobao-f' },
                { name: '阿里', icon: 'foxui-icon-ali-f' },
                { name: '京东', icon: 'foxui-icon-jingdong-f' },
                { name: '拼多多', icon: 'foxui-icon-pinduoduo-f' },
                { name: '闪电', icon: 'foxui-icon-shandian-f' },
                { name: '启用', icon: 'foxui-icon-qiyong-f' },
                { name: '选中', icon: 'foxui-icon-xuanzhong-f' },
                { name: '最新', icon: 'foxui-icon-zuixin-f' },
                { name: '开关', icon: 'foxui-icon-kaiguan-f' },
                { name: '最火', icon: 'foxui-icon-zuihuo-f' },
                { name: '收费', icon: 'foxui-icon-shoufei-f' },
                { name: '手机', icon: 'foxui-icon-shouji-f' },
                { name: '分组', icon: 'foxui-icon-fenzu-f' }, //
                { name: '色盘', icon: 'foxui-icon-sepan-f' },
                { name: '角标', icon: 'foxui-icon-jiaobiao-f' },
                { name: '全局', icon: 'foxui-icon-quanju-f' },
                { name: '女', icon: 'foxui-icon-nv-f' },
                { name: '男', icon: 'foxui-icon-nan-f' },
                { name: '勋章', icon: 'foxui-icon-xunzhang-f' },
                { name: '自定义', icon: 'foxui-icon-zidingyi-f' },
                { name: '走势', icon: 'foxui-icon-zoushi-f' },
                { name: '声音', icon: 'foxui-icon-shengyin-f' },
                { name: '新浪', icon: 'foxui-icon-xinlang-f' },
                { name: '安全', icon: 'foxui-icon-anquan-f' },
                { name: '应用', icon: 'foxui-icon-yingyong-f' }, //
                { name: '多端', icon: 'foxui-icon-duoduan-f' },
                { name: '警示', icon: 'foxui-icon-jingshi-f' },
                { name: '编号', icon: 'foxui-icon-bianhaox' },
                { name: '护盾', icon: 'foxui-icon-hudun-f' },
                { name: '文件夹', icon: 'foxui-icon-wenjianjia-f' },
                { name: '流量', icon: 'foxui-icon-liuliang-f' },
                { name: '服务器', icon: 'foxui-icon-fuwuqi-f' },
                { name: '加固', icon: 'foxui-icon-jiagu-f' },
                { name: '概况', icon: 'foxui-icon-gaikuang-f' },
                { name: '警告', icon: 'foxui-icon-jinggao-f' },
                { name: '百度', icon: 'foxui-icon-baidu-f' },
                { name: '地图', icon: 'foxui-icon-ditu-f' },
                { name: '目录', icon: 'foxui-icon-mulu-f' },
                { name: '天猫', icon: 'foxui-icon-tianmao-f' },
                { name: 'PDF', icon: 'foxui-icon-PDF-f' },
                { name: 'ZIP', icon: 'foxui-icon-ZIP-f' },
                { name: 'XLS', icon: 'foxui-icon-XLS-f' },
                { name: 'PPT', icon: 'foxui-icon-PPT-f' },
                { name: 'JPG', icon: 'foxui-icon-JPG-f' },
                { name: 'MP3', icon: 'foxui-icon-MP3-f' },
                { name: 'UN', icon: 'foxui-icon-UN-f' },
                { name: 'DOC', icon: 'foxui-icon-DOC-f' },
                { name: 'MP4', icon: 'foxui-icon-MP4-f' },
            ],
        },
    ];
}

Iconsel.prototype._init = function () {
    this._bindShow();
    this._bindConfirm();
    this._bindSwitchGroup();
    this._bindMouseoverIcon();
    this._bindMouseoutIcon();
    this._bindMouseoverDelete();
    this._bindMouseoutDelete();
    this._bindDeleteIcon();
};

Iconsel.prototype._bindShow = function () {
    let that = this;
    $(document).on('click', this.HANDLE, function () {
        that._show(this);
    });
};

Iconsel.prototype._bindConfirm = function () {
    let that = this;
    $(document).on('click', this.ICON, function () {
        let $icon = $(this).find('i');
        if ($icon.length > 0) {
            let iconClass = $icon.attr('class');
            $(that.target)
                .find(that.TARGETICONCONTAINER)
                .empty()
                .append(`<i class='${iconClass}'></i>`);
            $(that.target)
                .closest('.foxui-iconsel-handle')
                .find('.foxui-iconsel-input')
                .val(iconClass);
            $(that.CLOSE).click();
            // 发布消息
            let subid = $(that.target).closest(that.CONTAINER).attr('data-subid');
            if (subid)
                observer._publiced(
                    'custom',
                    { type: 'font', iconClass: iconClass },
                    subid,
                    'change'
                );
        } else {
            let url = $(this).find('img').attr('src');
            $(that.target)
                .find(that.TARGETICONCONTAINER)
                .empty()
                .append(`<div class='img-icon'><img src='${url}'/></div>`);
            $(that.target).closest('.foxui-iconsel-handle').find('.foxui-iconsel-input').val(url);
            $(that.CLOSE).click();
            // 发布消息
            let subid = $(that.target).closest(that.CONTAINER).attr('data-subid');
            if (subid)
                observer._publiced('custom', { type: 'image', iconUrl: url }, subid, 'change');
        }
    });
};

Iconsel.prototype._bindMouseoverIcon = function () {
    $(document).on('mouseover', this.TARGETICON, function () {
        $(this).closest('.foxui-iconsel-handle').find('.delete').css('opacity', 1);
    });
};

Iconsel.prototype._bindMouseoutIcon = function () {
    $(document).on('mouseout', this.TARGETICON, function () {
        $(this).closest('.foxui-iconsel-handle').find('.delete').css('opacity', 0);
    });
};

Iconsel.prototype._bindMouseoverDelete = function () {
    $(document).on('mouseover', this.TARGETDELETE, function () {
        let $this = $(this),
            len = $this
                .closest('.foxui-iconsel-handle')
                .find('.foxui-iconsel-show i, .foxui-iconsel-show .img-icon').length;
        if (len > 0) {
            $this.closest('.foxui-iconsel-handle').find('.foxui-iconsel-input').val('');
            $this.css('opacity', 1);
        }
    });
};

Iconsel.prototype._bindMouseoutDelete = function () {
    $(document).on('mouseout', this.TARGETDELETE, function () {
        $(this).css('opacity', 0);
    });
};

Iconsel.prototype._bindDeleteIcon = function () {
    $(document).on('click', this.TARGETDELETE, function (e) {
        let $this = $(this);
        e.stopPropagation();
        $this.closest('.foxui-iconsel-handle').find('.foxui-iconsel-show').empty();
        $this.css('opacity', 0);
    });
};

Iconsel.prototype._bindSwitchGroup = function () {
    let that = this;
    $(document).on('click', this.GROUP, function () {
        let $this = $(this),
            isActive = $this.is('.is-active');
        if (!isActive) {
            $(that.GROUP).filter('.is-active').removeClass('is-active');
            $this.addClass('is-active');
            that._updateIconList($this.index());
        }
    });
};

Iconsel.prototype._updateIconList = function (index) {
    $(this.ICONLIST).empty().append(this._iconListHtml(index));
};

Iconsel.prototype._show = function (target) {
    // 保存触发目标DOM节点
    this.target = target || '';
    // 打开管理器
    dialog({
        title: this.title,
        content: this._contentHtml(),
        width: this.width,
        marginTop: this.marginTop,
        className: this.className,
    });
};

Iconsel.prototype._contentHtml = function () {
    return [
        '<div class="foxui-row foxui-gutter-0">',
        '<div class="foxui-col-xs-5 foxui-col-sm-5 foxui-border-right">',
        `${this._leftPartHtml()}`,
        '</div>',
        '<div class="foxui-col-xs-19 foxui-col-sm-19">',
        `${this._rightPartHtml()}`,
        '</div>',
        '</div>',
    ].join('');
};

Iconsel.prototype._leftPartHtml = function () {
    return [
        '<div class="group-content">',
        '<ul class="group-list">',
        `${this._groupListHtml()}`,
        '</ul>',
        '</div>',
    ].join('');
};

Iconsel.prototype._groupListHtml = function () {
    let htmlArr = [];
    this.dataList.forEach((item, idx) => {
        htmlArr.push(
            [
                `<li class="group-item${idx === 0 ? ' is-active' : ''}">`,
                `<span class="foxui-ellipsis">${item.groupName}</span>`,
                `<strong>${item.iconList.length}</strong>`,
                '</li>',
            ].join('')
        );
    });
    return htmlArr.join('');
};

Iconsel.prototype._rightPartHtml = function () {
    return [
        '<div class="icons-content">',
        '<div class="foxui-row foxui-gutter-0">',
        `${this._iconListHtml()}`,
        '</div>',
        '</div>',
    ].join('');
};

Iconsel.prototype._iconListHtml = function (index) {
    index = index || 0;
    let dataList = this.dataList,
        htmlArr = [];
    if (dataList.length > 0 && dataList[index].iconList && dataList[index].iconList.length > 0) {
        if (index < 3) {
            dataList[index].iconList.forEach(item => {
                htmlArr.push(
                    [
                        '<div class="foxui-col-xs-3 foxui-col-sm-3">',
                        '<div class="icon-item">',
                        '<div class="icon-item-inner">',
                        `<i class="${item.icon}"></i>`,
                        `<span class="foxui-ellipsis">${item.name}</span>`,
                        '</div>',
                        '</div>',
                        '</div>',
                    ].join('')
                );
            });
        } else {
            dataList[index].iconList.forEach(item => {
                if (dataList[index].type === 'font') {
                    htmlArr.push(
                        [
                            '<div class="foxui-col-xs-3 foxui-col-sm-3">',
                            '<div class="icon-item">',
                            '<div class="icon-item-inner">',
                            `<i class="${this.fontClass + ' ' + item.icon}"></i>`,
                            `<span class="foxui-ellipsis">${item.name}</span>`,
                            '</div>',
                            '</div>',
                            '</div>',
                        ].join('')
                    );
                } else if (dataList[index].type === 'image') {
                    htmlArr.push(
                        [
                            '<div class="foxui-col-xs-3 foxui-col-sm-3">',
                            '<div class="icon-item">',
                            '<div class="icon-item-inner">',
                            `<img src="${item.url}"/>`,
                            `<span class="foxui-ellipsis">${item.name}</span>`,
                            '</div>',
                            '</div>',
                            '</div>',
                        ].join('')
                    );
                }
            });
        }
    }
    return htmlArr.join('');
};

/**
 * @description: 添加订阅者 --> 改变时
 * @param {*} subid
 * @param {*} callback
 * @return {*}
 * @Date: 2022-12-22 17:15:25
 */
Iconsel.prototype.onChange = function (subid, callback) {
    if (subid && _typeOf(callback) === 'function') {
        observer._subscribe('custom', callback, subid, 'change');
    }
};

/**
 * @description: 取消订阅 --> 改变时
 * @param {*} subid
 * @return {*}
 * @Date: 2022-12-22 17:15:38
 */
Iconsel.prototype.unChange = function (subid) {
    if (subid) observer._unsubscribe('custom', null, subid, 'change');
};

/**
 * @description: 初始化
 * @param {*} dataList   ->  [{groupName:'图标', iconList:[{name:'', icon:''}]}]
 * @param {*} fontClass  ->  字体图标共用类
 * @return {*}
 * @Date: 2022-12-22 11:21:22
 */
Iconsel.prototype.add = function (dataList, fontClass) {
    // 保存图标数
    this.dataList = [...this.dataList, ...dataList];
    this.fontClass = fontClass || 'iconfont';
};

let iconsel = new Iconsel();

export { iconsel };
